--- layout: post title: Using jupyter notebooks with plotly graphs in a jekyll blog subtitle: Sample Indian States map render plotly graphs inside your jekyll blog using jupyter notebook tags: [plotly,python,jupyter,jekyll] ---
from IPython.display import display
from IPython.display import HTML
import IPython.core.display as di # Example: di.display_html('<h3>%s:</h3>' % str, raw=True)
# This line will hide code by default when the notebook is exported as HTML
di.display_html('<script>jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area").toggle(); jQuery(".prompt").toggle();}});</script>', raw=True)
#hide
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
from plotly.graph_objs import Scatter, Figure, Layout
import plotly
import plotly.graph_objs as go
init_notebook_mode(connected=False)
import json
import numpy as np
import pandas as pd
#hide
import geopandas as gpd
#hide
gdf = gpd.read_file('states_india.shp')
with open('states_india_1.json') as response:
india = json.load(response)
fig = go.Figure(go.Choroplethmapbox(geojson=india, locations=gdf['st_nm'], z=gdf['state_code'],featureidkey="properties.st_nm",
colorscale="Viridis", zmin=0, zmax=25,
marker_opacity=0.5, marker_line_width=1))
fig.update_layout(mapbox_style="carto-positron",
mapbox_zoom=3.5,mapbox_center = {"lat":23.537876 , "lon": 78.292142} )
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.show()
#hide
front_matter_str = """---
layout: post
title: Using jupyter notebooks with plotly graphs in a jekyll blog
subtitle: Sample Indian States map render plotly graphs inside your jekyll blog using jupyter notebook
tags: [plotly,python,jupyter,jekyll]
---"""
import subprocess
def conv_nb_jekyll(filename,front_matter):
"""
this function will convert your jupyter notebook to html and
prepend the front matter string you provide to the top of the resulting html file
Args:
filename: filename of input jupyter notebook (.ipynb file)
front_matter: python formatted string resembling YAML jekyll front matter
Returns:
jekyll_html_post: location of final html file to post on your jekyll blog
"""
#convert jupyter notebook to html
subprocess.call(["jupyter", "nbconvert","--to","html","--template","full",filename])
#function that will prepend given string to given filename
def prepend_string(filename, string):
with open(filename, 'r+') as f:
content = f.read()
f.seek(0, 0)
f.write(string.rstrip('\r\n') + '\n' + content)
#call function to prepend front matter to the file
html_file = filename.replace('.ipynb','.html')
prepend_string(html_file,front_matter)
#print('converted html file at: ',html_file)
return html_file
jekyll_html_post = conv_nb_jekyll(filename='plotly_map.ipynb',front_matter=front_matter_str)